import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Space, Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch } from 'antd';
import Delshapan from '@/components/Delshapan';
import AddModel from '@/components/sand/addModel';
import Draggable from 'react-draggable';
import EditModel from '@/components/sand/EditModel';

export const shapan = ({ props, dispatch, sanlist, adddata }: any) => {
  // 删除
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [delshaitem, setdelshaitem] = useState('');
  const [delshaindex, setdelshaindex] = useState(0);
  const delshapan = (item: any, index: any) => {
    // console.log(item)
    setIsModalOpen(true);
    setdelshaindex(index);
    setdelshaitem(item.title);
  };
  const close = () => {
    setIsModalOpen(false);
  };
  // 添加
  const [addshaModel, setaddshaModel] = useState(false);
  const addModel = () => {
    setaddshaModel(true);
  };
  const addclose = () => {
    setaddshaModel(false);
  };
  //  添加移除
  let addtag = (item: any, index: number) => {
    // console.log(item)
    dispatch({ type: 'sand/CHANGE', payload: item.title });
    // console.log(index)
    let addBtns = document.querySelectorAll('.addbtn');
    let btntext = addBtns[index].innerHTML;
    //  console.log(addBtns[index])
    if (btntext === '添加') {
      addBtns[index].innerHTML = '移除';
    } else {
      addBtns[index].innerHTML = '添加';
    }
  };
  // 编辑
  const [editmodel, seteditmodel] = useState(false);
  const [edititem, setedititem] = useState('');
  const [editindex, seteditindex] = useState(0);
  const edittag = (item: any, index: any) => {
    seteditmodel(true);
    setedititem(item);
    seteditindex(index);
  };
  const closeedit = () => {
    seteditmodel(false);
  };
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: 'title',
      dataIndex: 'title',
    },
    {
      title: '楼层数',
      dataIndex: 'floor_num',
    },
    {
      title: '销售状态',
      dataIndex: 'sale_status',
      render: (item: any, index: any) => {
        return item === '30' ? '在售' : '未售';
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (item: any, index: any) => {
        return (
          <div>
            <Switch
              checkedChildren="正常"
              unCheckedChildren="禁用"
              defaultChecked={item ? true : false}
            />
          </div>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      render: (_: any, item: any, index: any) => {
        return (
          <div>
            <button
              className="addbtn"
              style={{ marginRight: '10px' }}
              onClick={() => {
                addtag(item, index);
              }}
            >
              添加
            </button>
            <button
              style={{ marginRight: '10px' }}
              onClick={() => edittag(item, index)}
            >
              编辑
            </button>
            <button
              style={{ marginRight: '10px' }}
              onClick={() => {
                delshapan(item, index);
              }}
            >
              删除
            </button>
          </div>
        );
      },
    },
  ];

  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  // 切换

  const onChange = (key: string) => {
    console.log(key);
  };

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: (
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680608386&t=214d00cf32f09262d73bb913b22b96f6"
          alt=""
        />
      ),

      children: (
        <img
          style={{ width: '100%', height: '200px' }}
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680608386&t=214d00cf32f09262d73bb913b22b96f6"
          alt=""
        />
      ),
    },
    {
      key: '2',
      label: (
        <img
          src="https://img0.baidu.com/it/u=53079408,1616173051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
        />
      ),
      children: (
        <img
          style={{ width: '100%', height: '200px' }}
          src="https://img0.baidu.com/it/u=53079408,1616173051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
        />
      ),
    },
    {
      key: '3',
      label: (
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320150258_rcuou.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680652627&t=3b7103f9cf4dfa7ff3d0cf8adc3e7df2"
          alt=""
        />
      ),
      children: (
        <img
          style={{ width: '100%', height: '200px' }}
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320150258_rcuou.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680652627&t=3b7103f9cf4dfa7ff3d0cf8adc3e7df2"
          alt=""
        />
      ),
    },
  ];
  useEffect(() => {
    dispatch({ type: 'sand/Get_sand' });
  }, []);

  return (
    <div>
      <Button type="primary" onClick={addModel}>
        添加楼栋
      </Button>
      <div style={{ display: 'flex' }}>
        <Table
          style={{ width: '600px', marginRight: '50px' }}
          columns={columns}
          dataSource={sanlist}
        />
        <Tabs
          defaultActiveKey="1"
          items={items}
          onChange={onChange}
          style={{ position: 'relative' }}
        ></Tabs>

        <div
          style={{
            width: '200px',
            height: '100px',
            position: 'absolute',
            top: '200px',
            left: '680px',
            display: 'flex',
            textAlign: 'center',
          }}
        >
          {adddata &&
            adddata.map((item: any, index: number) => {
              return (
                <div>
                  <Draggable>
                    <span
                      style={{
                        background: '#099',
                        marginRight: '10px',
                        width: '40px',
                        display: 'inline-block',
                      }}
                    >
                      {item}
                    </span>
                  </Draggable>
                </div>
              );
            })}
        </div>

        <Delshapan
          close={close}
          isModalOpen={isModalOpen}
          delshaindex={delshaindex}
          delshaitem={delshaitem}
        ></Delshapan>
        {/* 增加 */}
        <AddModel addshaModel={addshaModel} addclose={addclose}></AddModel>
        {/* 编辑 */}
        <EditModel
          editmodel={editmodel}
          closeedit={closeedit}
          edititem={edititem}
          editindex={editindex}
        >
          {' '}
        </EditModel>
      </div>
    </div>
  );
};

const mapStateToProps = ({ sand: { sanlist, adddata } }: any) => {
  return {
    sanlist,
    adddata,
  };
};

export default connect(mapStateToProps)(shapan);
